<template>
  <div class="container">
    <a-form
      id="components-form-demo-normal-login"
      :form="form"
      class="login-form"
      @submit="handleSubmit"
    >
      <a-form-item>
        <a-input
          v-decorator="[
            'username',
            { rules: [{ required: true, message: '请输入用户名!' }] },
          ]"
          placeholder="请输入用户名"
        >
          <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
          v-decorator="[
            'password',
            { rules: [{ required: true, message: '请输入密码!' }] },
          ]"
          type="password"
          placeholder="请输入密码"
        >
          <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-checkbox
          v-decorator="[
            'remember',
            {
              valuePropName: 'checked',
              initialValue: true,
            },
          ]"
        >
          记住我
        </a-checkbox>
        <!-- <a class="login-form-forgot" href="">
          Forgot password
        </a> -->
        <a-button type="primary" html-type="submit" class="login-form-button">
          登录
        </a-button>
        <!-- 或
        <a href="javascript:;" @click="goToRegister">
          注册!
        </a> -->
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import {login} from '@/utils/chat'
export default {
  name: 'UserLogin',
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'normal_login' });
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          let params = {
            username: values.username,
            password: values.password
          }
          login(params).then(res => {
            this.$store.commit('setUserName', values.username)
            this.$store.commit('setToken', res.data)
            this.$router.push('/home')
          }).catch(err => {
            console.log('err', err)
          })
        }
      });
    },
    goToRegister(e) {
      e.preventDefault();
      this.$router.push('/register')
    }
  },
};
</script>
<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ant-form {
  min-width: 300px;
}
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
</style>
